let _Vue = null //接收Vue实例
export default class VueRouter {
  constructor(options) {
    this.options = options
    this.routerMap = {} //将路由规则解析，key:路由地址  value路由组件
    this.data = _Vue.observable({
      //记录路由地址，创建响应式对象
      current: '#/',
    })
    this.init()
  }
  static install(Vue) {
    //Vue.use会自动注入router的install方法
    if (VueRouter.install.installed) {
      return
    }
    VueRouter.install.installed = true
    //把Vue赋值到全局变量中
    _Vue = Vue
    //使用混入方法，在每个页面挂载前，将路由赋值给vue实例
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
  init() {
    this.createRouterMap()
    this.initConponents(_Vue)
    this.initEvent()
  }
  createRouterMap() {
    this.options.routes.forEach((route) => {
      this.routerMap['#'+route.path] = route.component
    })
  }
  initConponents(Vue) {
    //创建routerlink组件，创建a标签超链接
    Vue.component('router-link', {
      props: {
        to: String,
      },
      //   template:"<a :href='to'><slot></slot></a>" //使用runtimeCompiler可以使用模版
      render(h) {
      
        return h("a",{
          attrs:{
              href:this.to
          },
          on:{
              click:this.clickHandler
          }
      },[this.$slots.default])
      },
      methods: {
        clickHandler(e) {
          window.location.href = '/#'+ this.to
          e.preventDefault()
        },
      },
    })
    let _self =this
    Vue.component('router-view', {
      render(h) {
        //返回路由地址
        console.log(_self.data.current)
        const component = _self.routerMap[_self.data.current] //获取当前路由地址匹配的组件
        return h(component)
      },
    })
  }
  initEvent(){
    addEventListener('hashchange',()=>{
      this.data.current = window.location.hash
     
    })
  }
}
